<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="工单单号" label-width=150>
				<u-input v-model="form.workOrderNo" placeholder="请输入工单单号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工单单别" label-width=150>
				<u-input v-model="form.orderType" placeholder="请输入工单单别" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工段编号" label-width=150>
				<u-input v-model="form.sectionNo" placeholder="请输入工段编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="排产编号" label-width=150>
				<u-input v-model="form.planNo" placeholder="请输入排产编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="产品编号" label-width=150>
				<u-input v-model="form.produceNo" placeholder="请输入产品编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="排产状态" label-width=140>
				<u-radio-group v-model="form.isEnd" @change="radioChange" >
					<u-radio shape="square" 
							 v-for="(item, index) in statusList" 
							 :name="item.name" 
							 :key="index">
							 {{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="getInfo">查询</u-button>
			</u-form-item>
		</u-form>
		<view class="table-content">
			<view class="hintInfo" v-if="pullDown">————下拉获取信息————</view>
			<view v-else class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
					<view class="list-item">
						<view>工段编号</view>
						<view>{{item.sectionNo}}</view>	
					</view>
					<view class="list-item">
						<text>排产序号</text>
						<text>{{item.planNo}}</text>
					</view>
					<view class="list-item">
						<text>排产ID</text>
						<text>{{item.planId}}</text>
					</view>
					<view class="list-item">
						<view>工作中心</view>
						<view>{{item.workCenter}}</view>
					</view>
					<view class="list-item">
						<view>计划排产数量</view>
						<view>{{item.planNumber}}</view>
					</view>
					<view class="list-item">
						<view>下线数量</view>
						<view>{{item.productionCountAll == -1 ? '0' : item.productionCountAll}}</view>
					</view>
					<view class="list-item">
						<view>合格数量</view>
						<view>{{item.qualifiedCount}}</view>
					</view>
					<view class="list-item">
						<view>工单单号</view>
						<view>{{item.workOrderNo}}</view>
					</view>
					<view class="list-item">
						<view>工单单别</view>
						<view>{{item.orderType}}</view>
					</view>
					<view class="list-item">
						<text>处理状态</text>
						<view>{{item.isEnd == 0 ? '未结束' : '已结束'}}</view>
					</view>
					<view class="flex u-row-center">
						<u-button size="medium" type="warning" @click="dealFunc(item.planNo)">指定重点工位</u-button>
					</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { getStationList,updateStationIsImport,getQCPlanList } from '../../utils/index.js'
	export default {
		data() {
			return {
				form: {
					workOrderNo: '',					//工单单号
					orderType: '',						//工单单别
					produceNo: '',						//产品编号
					planNo: '',							//排产编号
					sectionNo: '',						//工段编号
					isEnd: '未结束',						//排产是否结束 0未结束 1结束
					page: 1,							//页码
					limit: 100							//每页多少条记录
				},
				// 单选框的选择信息
				statusList: [
					{	
						name: '已结束'
					},
					{
						name: '未结束'
					}
				],
				records: [],							//异常报警信息表单
				pullDown: true							//使能当前页面的下拉刷新功能
			}
		},
		methods: {
			// 处理状态切换函数
			radioChange(name) {
				this.form.isEnd = name
			},
			//获取相关处理信息列表
			async getInfo() {
				const query = Object.assign({},this.form)
				query.isEnd = (query.isEnd == "未结束") ? "0" : "1"
				const { data } = await  getQCPlanList(query)
				this.records = data.data.records
				console.log(this.records,'this.records')
				this.pullDown = false
				if(this.records.length == 0) {
					this.$refs.uTips.show({
						title: '查询信息不存在，请核实！',
						type: 'warning',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '查询成功',
						type: 'success',
						duration: '2000'
					})
				}
			},
			// 下拉刷新,即调用查询按钮绑定的函数
			onPullDownRefresh() {
				this.getInfo()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				},2000)
			},
			// 携带参数planNo路由跳转
			dealFunc(planNo) {
				uni.navigateTo({
					url:"./selectID?planNo=" + planNo 
				})
			}
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 30rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	// 上线下线按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
</style>
